<template>
    <div class="content">
        <Panel title="文章分类管理" :bodyStyle="{padding:'10px'}" :style="{height:scrollerHeight}">
            <div>
                <SearchBox style="width:300px"
                           placeholder="输入搜索关键词"
                           v-model="value"
                           @search="onSearch($event)">
                    <Addon>
                        <span v-if="value" class="textbox-icon icon-clear" title="Clear value"
                              @click="value=null"></span>
                    </Addon>
                    <Menu>
                        <MenuItem value="all" text="搜索" iconCls="icon-ok"></MenuItem>
                    </Menu>
                </SearchBox>
                <LinkButton iconCls="icon-add" style="margin-left: 30px" @click="addNewCategory()">新增分类</LinkButton>
            </div>

            <DataGrid :data="data" :style="{height:datagridHeight}" class="datagrid">
                <GridColumn align="center" cellCss="datagrid-td-rownumber" width="30">
                    <template slot="body" slot-scope="scope">
                        {{scope.rowIndex + 1}}
                    </template>
                </GridColumn>
                <GridColumn field="category" title="分类名称" width="30%" align="center"></GridColumn>
                <GridColumn field="detail" title="分类说明"></GridColumn>
                <GridColumn title="操作" align="center">
                    <template slot="body" slot-scope="scope">
                        <LinkButton iconCls="icon-edit" @click="edit(scope.row)" style="margin:5px 10px 5px 5px">编辑
                        </LinkButton>
                        <LinkButton iconCls="icon-remove" @click="deleterow(scope.row)" style="margin:5px 10px 5px 5px">
                            删除
                        </LinkButton>
                    </template>

                </GridColumn>
            </DataGrid>
        </Panel>

            <Dialog ref="edit"
                    :title="dialogTitle"
                    :dialogStyle="{width:'500px',height:'300px'}"
                    :modal="true"
                    :draggable="true"
                    :resizable="true">
                <Form ref="form" :model="categotyModel" :rules="rules" labelPosition="before" :labelWidth="80"
                      :floatingLabel="true" @validate="errors=$event" style="max-width:500px;padding: 10px">
                    <FormField name="category" label="分类名称" >
                        <TextBox v-model="categotyModel.category"></TextBox>
                    </FormField>
                    <FormField name="detail" label="分类说明" >
                        <TextBox v-model="categotyModel.detail" :multiline="true"
                                 style="width:100%;height:120px"></TextBox>
                    </FormField>
                </Form>
                <div class="tools">
                    <LinkButton iconCls="icon-ok" @click="addConfirm()" style="margin-right:10px">确定</LinkButton>
                    <LinkButton iconCls="icon-no" @click="$refs.edit.close()" style="margin-right:10px">取消</LinkButton>
                </div>
            </Dialog>


    </div>
</template>

<script>
    import api from "../../../../utils/axios/api"

    export default {
        data() {
            return {
                // 0新增 1编辑
                editTag: 0,
                // 对话框标题
                dialogTitle: "新增",
                value: "",
                data: [],
                dialogVisible: false,
                currentrow: {},
                // 表单模型
                categotyModel: {
                    category: "",
                    detail: ""
                },
                // 验证规则
                rules: {
                    category: [{required: true, trigger: "change", message: "请输入分类名称"}],
                }
            }
        },
        name: "category.vue",
        computed: {
            // 滚动区高度
            // (业务需求：手机屏幕高度减去头部标题和底部tabbar的高度，当然这2个高度也是可以动态获取的)
            scrollerHeight: function () {
                return (window.innerHeight - 200) + 'px';
            },
            datagridHeight: function () {
                return (window.innerHeight - 310) + 'px';
            }
        },
        created() {
            this.getCategoryList();
        },
        mounted() {
            // 初始化关闭对话框
            this.$refs.edit.close();
        },
        methods: {
            // 获取所有分类列表
            async getCategoryList() {
                let {data: res} = await api.getCategoryList();
                this.data = res.data;
                console.log(res);
            },
            addNewCategory(){
                let _this=this;
                _this.editTag=0;
                _this.dialogTitle="新增分类";
                _this.resetForm();
                _this.$refs.edit.open();
            },

            // 对话框确认按钮
            addConfirm() {
                let _this = this;
                _this.$refs.form.validate(async () => {
                    let res = null;
                    let param = {
                        id: this.currentrow["id"],
                        category: this.categotyModel.category,
                        detail: this.categotyModel.detail
                    }
                    if (this.editTag == 1) {
                        res = await api.editCategory(param);
                    } else {
                        res = await api.addCategory(param);
                    }
                    let data = res.data;
                    this.$refs.edit.close();
                    if (data.code == 0) {
                        _this.$message({
                            message: data.msg,
                            type: "success"
                        });
                        this.getCategoryList();
                    }
                })


            },
            //解决重置表单时报 'resetFields' of undefined的错
            resetForm() {
                this.categotyModel.category="";
                this.categotyModel.detail="";
            },
            // 编辑当前行
            async edit(row) {
                this.editTag = 1;
                this.dialogTitle="编辑分类"
                this.currentrow = row;
                let param = {
                    id: this.currentrow["id"]
                }
                let {data: res} = await api.getCategoryById(param);
                if (res.code == 0) {
                    this.categotyModel = res.data;
                }
                this.$refs.edit.open();
            },
            // 删除当前行
            deleterow(row) {
                console.log("1211");
                let _this = this;
                _this.$confirm("确定删除吗 ?","系统提示",{
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(async()=>{
                    let param = {
                        id: row.id
                    }
                    let {data: res} = await api.deleteCategory(param);
                    if (res.code == 0) {
                        _this.$message({
                            message: res.msg,
                            type: "success"
                        });
                        _this.getCategoryList();
                    }
                })

            }

        }
    }
</script>

<style scoped lang="scss">
    .content {
        padding: 10px;

        .datagrid {
            margin-top: 20px;
        }

    }

    .tools {
        display: flex;
        justify-content: flex-end;

    }

</style>